<template>
	<view class="qh-user-head-img">
		<qh-image :size="size" :src="head_url" shape="circle" :preview="preview">
			<view class="qh-user-head-img__empty-avatar flex" slot="empty" :class="{'border': border}" :style="bgStyle">
				<text class="qh-rt-single qh-rt-yuangong qh-user-head-img__empty-icon" :style="iconStyle"></text>
			</view>
		</qh-image>
	</view>
</template>

<script>
	export default {
		name: 'qh-user-head-img',
		props: {
			src: {
				type: String,
				default: '',
			}, //头像地址
			size: {
				type: [String, Number],
				default: 96,
			}, //大小
			border: {
				type: Boolean,
				default: false,
			}, //是否需要边框
			preview: {
				type: Boolean,
				default: false,
			}, //是否支持预览
			self: {
				type: Boolean,
				default: false,
			}, //是否是登录者自己的头像
			bgColor: {
				type: String,
				default: ''
			}, //背景颜色
			color: {
				type: String,
				default: ''
			}, //颜色
		},
		computed: {
			bgStyle() {
				return this.bgColor ? ('background-color:' + this.bgColor) : '';
			},
			iconStyle() {
				let size = parseInt(this.size);
				return 'font-size:' + size * 0.72 + 'rpx;line-height:' + size * 0.72 + 'rpx;' + (this.color ? ('color:' + this.color) : '');
			},
			head_url() {
				return this.self ? this.$store.loginInfo.head_img_path : this.src;
			}
		},
	}
</script>

<style lang="scss">
	.qh-user-head-img {
		.qh-user-head-img__empty-avatar {
			width: 100%;
			height: 100%;
			align-items: flex-end;
			justify-content: center;
			background-color: var(--primary-color);
			border-radius: 50%;

			&.border {
				border: 2rpx solid #FFFFFF;
			}

			.qh-user-head-img__empty-icon {
				font-size: 96rpx;
				color: #FFFFFF;
			}
		}
	}
</style>
